

// 属性  
// 可视区域   一个对象对应一个区域
// 图片区域 
// 焦点区域 按钮区域 

// 变量 存放当前是第几张图片 
// 第几个定时器 


//方法 
// 生成焦点 插入焦点 

// 自动轮播 每隔2000ms 切换下一张  
// 上一张   当前这一张 取消active 上一张添加active 
// 下一张   当前这一张 取消active  下一张添加active 
// 第几章   当前这一张 取消active  第几张添加active 

// 第几张图片  上一张    --  下一张 ++  防止越界 
// 当第几张  <0  让这一张的张数变成   所有图片的length-1
// 当第几张  >=总张数    让这一张的张数变成  0 从第一张开始  

// 切换图片的方法  

// 图片区域 移入移出  

// 点击按钮切换图片 (第几张 上一张  下一张  )

class Lunbo{

    constructor(selector,options={}){
        // selector 选择器
        this.banner = document.querySelector(selector);
        //承载图片的盒子
        this.imgBox = this.banner.querySelector('.imgBox');
        // 承载按钮的盒子 
        this.pointBox = this.banner.querySelector('.pointBox');
        // 当前第几张
        this.index = 0;
        this.timer = 0;
        this.options = options;
        // 默认每一张图片的动画是 transition: all .3s linear;

        // 如果你传过来一个动画事件  
        // 应该让每一张都按照你的动画时间执行
        // 也就是需要每一张都改变 
        for(let j=0;j<this.imgBox.children.length;j++){
            this.imgBox.children[j].style.transition =  `all ${(this.options.speed || 300) / 1000 }s linear`;
        }
        this.setPointer();
        this.autoPlay();
        this.overout();
        this.bindEvent();
    }


    setPointer(){
        // 有几张图片 生成多少个 焦点  
        const pointerNum = this.imgBox.children.length;
        for(let i=0;i<pointerNum;i++){
            // 每次循环创建一个新的li 
            const li = document.createElement('li');
            li.classList.add('item');
            if(i==0){
                li.classList.add('active')
            }
            li.dataset.point = i;
            this.pointBox.appendChild(li);
        }

    }


    // 切换图片  
    //切换到第几张    数字
    // 上一张   true
    // 下一张    false
    changeOne(type){
        // 不管上一张还是下一张  都在 移除当前这一张的 active 按钮的active
        this.imgBox.children[this.index].classList.remove('active');
        this.pointBox.children[this.index].classList.remove('active');

        if(type === true){
            // 上一张
            this.index--;

        }else if(type === false){
            this.index++;
        }
        else{
            this.index = type;
        }
        // 当前页码
        if(this.index<0){
            this.index = this.imgBox.children.length-1;

        }
        // 当前页码
        if(this.index>= this.imgBox.children.length){
            this.index = 0;
        }

        this.imgBox.children[this.index].classList.add('active');
        this.pointBox.children[this.index].classList.add('active');


    }


    autoPlay(){
        this.timer = setInterval(()=>{
            // 自动轮播 一直下一张 
            this.changeOne(false);
        },this.options.duration || 2000);
    }


    // 移入移出  
    // 移入停止轮播 
    // 移出 继续轮播 

    overout(){
        this.banner.addEventListener('mouseover',()=> clearInterval(this.timer));
        this.banner.addEventListener('mouseout',()=> this.autoPlay());

    }


    // 绑定事件 
    // 事件委托 

    bindEvent(){
        this.banner.addEventListener('click',(e)=>{
            if(e.target.className == 'prev'){
                // 如果写的是function(){} this代表的是事件源
                // 我们的目标this应该是实例化的对象 
                // alert(this);
                this.changeOne(true);
            }

            if(e.target.className == 'next'){
                this.changeOne(false);
            }

            if(e.target.className == 'item'){
                this.changeOne(e.target.dataset.point-0);
            }
        })
    }



}